<!DOCTYPE html>
<html lang="zh_CN">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>评论</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="viewport"
		content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

	<!-- 固定的css 和 common.js 的引用    -->
	<link rel="stylesheet" href="http://47.104.254.28/commonfile/css/sm.min.css">
	<link rel="stylesheet" href="http://47.104.254.28/commonfile/css/common.css">
	<script type="text/javascript" src="http://47.104.254.28/commonfile/common/common/common.js"></script>

	<!-- <link rel="stylesheet" href="../../css/sm.min.css">
	<link rel="stylesheet" href="../../css/common.css"> -->
	<!-- <script type="text/javascript" src="../../common/common/common.js"></script> -->

	<!-- <script type="text/javascript"
		src="http://47.104.254.28/commonfile/js/js/vconsole.min.js"></script>
	<script>
		var vConsole = new VConsole();
	</script> -->



	<style type="text/css">
		.comment {}

		.comment-item {
			background: #fff;
			padding: 0.6rem;
			position: relative;
		}

		.comment-item:not(:last-child) {
			margin-bottom: 0.5rem;
		}

		.comment-item__header {
			display: flex;
			align-items: center;
			line-height: 1;
		}

		.comment-item__avatar img {
			display: block;
			width: 1.6rem;
			height: 1.6rem;
			margin-right: 0.6rem;
			border-radius: 50%;
		}

		.comment-item__name {
			padding-top: 0.2rem;
			font-size: 0.7rem;
			color: #3861f1;
		}

		.comment-item__date {
			padding-top: 0.2rem;
			font-size: 0.6rem;
			color: #999;
		}

		.comment-item__content {
			margin-top: 0.3rem;
			padding-left: 2.2rem;
			font-size: 0.7rem;
			color: #666;
			text-align: justify;
			word-break: break-all;
		}

		.comment-item__icon {
			position: absolute;
			top: 0.6rem;
			right: 0.6rem;
		}

		.commnet-btn {
			position: fixed;
			bottom: 1.5rem;
			left: 50%;
			transform: translateX(-50%);
			z-index: 100;

			width: 2rem;
			height: 2rem;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #3861f1;
			box-shadow: 0px 0px 8px rgba(56, 97, 241, 0.5);
			border-radius: 50%;
		}

		.commnet-btn img {
			width: 1rem;
			height: 1rem;
		}

		.message-wrap {
			display: none;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 100;
		}

		.message-container {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #fff;
			padding-left: 0.5rem;
		}

		.message-wrap .message-box {
			flex: 1;
			padding: 0.35rem 0;
			height: 2.2rem;
		}

		textarea {
			width: 100%;
			height: 1.5rem;
			line-height: 1.3rem;
			border: none;
		}

		.send-message {
			height: 2.2rem;
			padding: 0 0.5rem;
			font-size: 0.8rem;
			line-height: 2.2rem;
			color: #3861f1;
			background: #f8f8f8;
		}
	</style>


</head>

<body>
	<div class="page-group">
		<div class="page page-current">
			<div class="content infinite-scroll infinite-scroll-bottom" data-distance="100">
				<div class="comment">
					
					<!--<div class="comment-item">

						<div class="comment-item__header">
							<div class="comment-item__avatar">
								<img
									src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg"
									alt="">
							</div>
							<div>
								<div class="comment-item__name">测试啊</div>
								<div class="comment-item__date">2020-08-02 14:39:49</div>
							</div>
						</div>
						<div class="comment-item__content">哈哈读卡后视镜短发凉快圣诞节福利卡加适量的开发商绝代风华全微分能看见啊点击，你发哦if能理解而哦啊方in是登录放款</div>

						<div class="comment-item__icon">
							<span class="icon icon-remove"></span>
						</div>
					</div> -->
				</div>
				
				<!-- 加载提示符 -->
				<div class="infinite-scroll-preloader">
					<div class="preloader"></div>
				</div>

				<div class="commnet-btn">
					<img src="http://47.104.254.28/commonfile/img/img/icon/write.png" alt="">
				</div>

				<div class="message-wrap">
					<div class="message-container">
						<div class="message-box">
							<textarea id="message" placeholder="请输入评论" autofocus style="resize:none;"></textarea>
						</div>
						<div class="send-message">评论</div>
					</div>
				</div>
			</div>
		</div>
	</div>




	<!-- 固定的js引用，所有的jQuery 要用 $$ 表示 -->
	<script type="text/javascript" src="http://47.104.254.28/commonfile/js/js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript">var $$ = jQuery.noConflict();</script>
	<script type='text/javascript' src='http://47.104.254.28/commonfile/zepto/zepto/zepto.min.js'
		charset='utf-8'></script>
	<script type='text/javascript' src='http://47.104.254.28/commonfile/js/js/sm.min.js' charset='utf-8'></script>

	<!-- <script type="text/javascript"
		src="../../js/js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript">var $$ = jQuery.noConflict();</script>
	<script type='text/javascript'
		src='../../zepto/zepto/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='../../js/js/sm.min.js'
		charset='utf-8'></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script> -->

	<!-- <script type='text/javascript' src='http://47.104.254.28/commonfile/js/js/sm-extend.min.js' charset='utf-8'></script> -->
	<!-- <script src="http://47.104.254.28/commonfile/js/js/swiper/swiper.min.js"></script> -->

	<script type="text/javascript">
	Date.prototype.format = function(format) {
    /*
     * eg:format="YYYY-MM-dd hh:mm:ss";

     */
    var o = {
        "M+" :this.getMonth() + 1, // month
        "d+" :this.getDate(), // day
        "h+" :this.getHours(), // hour
        "m+" :this.getMinutes(), // minute
        "s+" :this.getSeconds(), // second
        "q+" :Math.floor((this.getMonth() + 3) / 3), // quarter
        "S" :this.getMilliseconds()
    // millisecond
    }
    if (/(y+)/.test(format)) {
        format = format.replace(RegExp.$1, (this.getFullYear() + "")
                .substr(4 - RegExp.$1.length));
    }
    for ( var k in o) {
        if (new RegExp("(" + k + ")").test(format)) {
            format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k]
                    : ("00" + o[k]).substr(("" + o[k]).length));
        }
    }
    return format;
}

		var loading = false;

		// 注册'infinite'事件处理函数
		$(document).on('infinite', '.infinite-scroll-bottom', function () {

			// 如果正在加载，则退出
			if (loading) return;

			// 设置flag
			loading = true;
			getComment();
		});

		function successCallBack(data) {
			loading = false

			if (!data.success) {
				$.toast(data.message, 1500);
			}
			if (isNotNull(data.data)) {
				let bookcomments = data.data.bookcomments

				if (bookcomments.length < limit) {
					$.detachInfiniteScroll($('.infinite-scroll'));
					// 删除加载提示符
					$('.infinite-scroll-preloader').remove();
				}

					let html = ''
					
					for (let val of bookcomments) {
						let del = ''
						let nickname = ''
						let avatar = ''
						if (val.user && isNotNull(val.user.nickname)) {
							nickname = val.user.nickname
						}
						if (val.user && isNotNull(val.user.avatar_url)) {
							avatar = val.user.avatar_url
						}
						if (val.user_id == curuserid) {
							del = `<div data-id="${val.id}" class="comment-item__icon">
											<span class="icon icon-remove"></span>
										</div>`;
						}
						html += `<div class="comment-item">
											<div class="comment-item__header">
												<div class="comment-item__avatar">
													<img
														src="${avatar}"
														alt="">
												</div>
												<div>
													<div class="comment-item__name">${nickname}</div>
													<div class="comment-item__date">${val.comment_day}</div>
												</div>
											</div>
											<div class="comment-item__content">${val.content}</div>
											${del}						
										</div>`
				}
				$$('.comment').append(html);
				$.refreshScroller();

			}
		}

		function errorCallBack(data) {
			console.log(data)
			loading = false
		}

		$$('.comment').on('click', '.comment-item__icon', function(e) {
			e.preventDefault();
			e.stopPropagation();
			let cid = $$(this).data('id')
			console.log(cid)
			$.confirm('删除后无法恢复是否删除？', '删除', function () {
				net_request('get', 'api/v1/delBookComment', {
					id: cid
				}, function(data) {
					if (data.success) {
						$.toast('删除成功', 1500);
						$.attachInfiniteScroll($('.infinite-scroll'));
						$$('.comment').html('');
						getComment();
					}
				}, function(err) {
					console.log(err)
					$.toast('删除失败', 1500);
				});
			});
		})

		$$('.send-message').on('click', function() {
			let message = $$('#message').val();
			if (!$.trim(message)) {
				$.toast('请输入评论', 1500);
				return false;
			}
			$$('.message-wrap').hide();
			$$('.commnet-btn').show();
			net_request('post', 'api/v1/bookcomment', {
					book_id: book_id,
					content: message,
					comment_day: new Date().format("yyyy-MM-dd hh:mm:ss")
				}, function(data) {
					if (data.success) {
						$$('#message').val('');
						$.attachInfiniteScroll($('.infinite-scroll'));
						$.toast('评论成功', 1500);
						$$('.comment').html('');
						getComment();
					}
				}, function(err) {
					console.log(err)
					$.toast('评论失败', 1500);
				});
		});

		$(document).click(function(e){
        var target = $(e.target);
        if(target.closest(".message-wrap").length != 0 || target.closest(".commnet-btn").length != 0) return;
        $$('.message-wrap').hide();
				$$('.commnet-btn').show();
    });

		$$('.commnet-btn').on('click', function() {
			$$(this).hide();
			$$('.message-wrap').show();
			$$('#message').focus();
		})

		var limit = 15;
		var book_id = '';

		function getComment() {
			var params = {
				book_id: book_id,
				limit: limit,
				offset: $$('.comment-item').length
			}

			net_request('get', 'api/v1/bookcomment', params, successCallBack, errorCallBack);
		}

		function getParams(data) {
			//	data需要转成json调用 ，函数urlParamParseJson();
			var jsonData = urlParamParseJson(data);
			// if (!isNotNull(jsonData.book_id)) {
			// 	return false;
			// }
			book_id = jsonData.book_id;
			getComment();
		}

		$$(function () {
			$.init();
		});
	</script>
</body>

</html>